import React from 'react'
import { withRouter } from 'react-router-dom';
import { SwipeAction, Ellipsis, Button, Dialog, Checkbox, Stepper } from 'antd-mobile';
import "./GoodList.less"
function GoodList(props) {
    let { isshop, list, width = "40%", height = "3rem", history: { push }, delCart, chagneChecked, changeNum } = props
    return (
        <div className='goods-box'>
            {
                list.map((item, index) => (
                    isshop ?
                        <SwipeAction
                            key={item.id}
                            rightActions={[
                                {
                                    key: 'delete',
                                    text: '删除',
                                    color: 'danger',
                                    onClick: async () => {
                                        await Dialog.confirm({
                                            content: '确定要删除吗？',
                                        }).then(res => {
                                            // TODO：购物车删除功能
                                            res && delCart(item.id)
                                        })
                                    },
                                },
                            ]}
                        >
                            <>
                                <div className="card" style={{ height }}>
                                    <div className="card_bg">
                                        <div
                                            className='checkwrap'
                                        >
                                            <Checkbox checked={item.isChecked} onChange={checked => chagneChecked(index, checked)} />
                                        </div>
                                        <img src={item.img} style={{ width }} />
                                        <div className='con'>
                                            <Ellipsis direction='end' rows={2} content={item.goodsname} />
                                            <div className="price">
                                                <p> ￥{item.price} </p>
                                                <Stepper min={0} max={5} value={item.num}
                                                    onChange={num => changeNum(index, num)} />
                                            </div>
                                            <Button color='danger' className='add-button'>加入购物车</Button>
                                        </div>
                                    </div>
                                </div>
                            </>
                        </SwipeAction>
                        :
                        <div className="card" style={{ height }} key={item.id} onClick={() => push(`/detail?id=${item.id}&type=1`)}>
                            <div className="card_bg" >
                                <img src={item.img} style={{ width }} />
                                <div className='con'>
                                    <Ellipsis direction='end' rows={1} content={item.goodsname} />
                                    <Ellipsis direction='end' rows={2} content={item.description} style={{ fontSize: ".2rem", padding: ".1rem" }} />
                                    <div className="price">
                                        <p> ￥{item.price} </p>
                                        <span>￥{item.market_price}</span>
                                    </div>
                                    <Button color='danger' className='add-button'>加入购物车</Button>
                                </div>
                            </div>
                        </div>
                ))
            }
        </div>
    )
}
export default withRouter(GoodList)